import React, { Component } from 'react'
import './index.css'
import Nav from '../../components/nav';
// import Myheader from '../../../../components/myheader';
import { SearchOutline } from 'antd-mobile-icons'
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination, Autoplay } from 'swiper';
import 'swiper/css';
import 'swiper/css/pagination';
export default class MainHeader extends Component {
    constructor() {
        super();
        this.state = {
            swiperBg: 0,
            myswiper: null//保存轮播对象
        }
    }
    componentDidMount() {
        //滚动事件
        window.onscroll = () => {
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            if (scrollTop > 200) {
                this.state.myswiper.autoplay.stop();
            } else {
                this.state.myswiper.autoplay.start();
            }
        }
        console.log(this.props);
    }
    componentWillUnmount() {
        window.onscroll = null;

    }
    goSearch = () => {
        this.props.history.push("/search");
    }
    render() {
        let { list, swiperArr } = this.props;
        let { swiperBg } = this.state;

        return <div className='mainheader' style={{ backgroundImage: `url(${swiperArr[swiperBg].singleBackgroundURL})` }}>
            <div className='header' style={{ backgroundImage: `url(${swiperArr[swiperBg].singleBackgroundURL})`, backgroundSize: 'cover' }}>
                <div className='top-bar'>
                    <div className='title'>旺仔旺铺</div>
                </div>
                <div className='search-bar' onClick={this.goSearch}>
                    <div className='input'>
                        &nbsp;<SearchOutline />&nbsp;
                        <span>浪味仙</span>
                    </div>
                </div>
            </div>

            <Swiper className='myswiper'
                modules={[Pagination, Autoplay]}
                pagination={{ clickable: true }}
                onSlideChange={(swiper) => {
                    this.setState({
                        swiperBg: swiper.realIndex
                    })

                }
                }
                onSwiper={(swiper) => this.setState({ myswiper: swiper })}
                autoplay={{ delay: 2000 }}
                loop={true}
            >
                {
                    swiperArr.map((item, index) =>
                        <SwiperSlide key={index}><img src={item.pictureURL} alt=""></img></SwiperSlide>)
                }
            </Swiper>
            <Nav list={list} />

        </div>

    }
}
